<template>
  <div class="c-table-page">
    <div class="c-table-page-top">
      <c-table
        ref="table"
        :primary-key="primaryKey"
        :data="data"
        :col="col"
        :opn="opn"
        :vol="vol"
        :index="index"
        :select="select"
        @select-change="selectChange"
        @switch-change="switchChange"
      >
        <template #opn="{ row, column, $index }" v-if="$scopedSlots.opn">
          <slot name="opn" :row="row" :column="column" :$index="$index"></slot>
        </template>
      </c-table>
    </div>
    <div class="c-table-page-bot">
      <c-pagination
        :seled="seled"
        :page="page"
        @update:page="$emit('update:page', $event)"
        :size="size"
        @update:size="$emit('update:size', $event)"
        :total="total"
        @change="pageChange"
      ></c-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CTablePage',
  components: {},
  props: {
    primaryKey: { type: String, default: 'id' },
    data: {
      type: Array,
      default() {
        return []
      }
    },
    index: { type: Boolean, default: false },
    select: { type: Boolean, default: false },
    col: {
      type: Array,
      default() {
        return []
      }
    },
    opn: {
      type: Object,
      default() {
        return {}
      }
    },
    vol: {
      type: Array,
      default() {
        return []
      }
    },
    page: { type: Number, default: 1 },
    size: { type: Number, default: 20 },
    total: { type: Number, default: 0 }
  },
  data() {
    return {
      seled: 0
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    refreshTable() {
      this.$refs.table.refreshTable()
    },
    selectChange(ids, len) {
      this.seled = len
      this.$emit('select-change', ids, len)
    },
    pageChange() {
      this.$emit('page-change')
    },
    switchChange(...args) {
      this.$emit('switch-change', ...args)
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .c-table-page {
    background-color: #fff;
    height: 100%;
    &-top {
      height: calc(100% - 60px);
    }
    &-bot {
      height: 60px;
    }
  }
}
</style>
